<!-- 审核纸条 -->
<template>
	<view class="box">
		<view class="content">
			<dcp-scroller :isLoading="isLoading" @refresh="refresh">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list-top">
					<text class="woman" v-if="item.sex==2">[女生盒子]</text>
					<text class="man" v-else>[男生盒子]</text>
					{{item.content}}
				</view>
				<view class="list-image">
					<image
					 v-for="(item,ink) in item.images" 
					 :key="ink" 
					 :src="item"
					 @click.stop="pictureView(ink,item.images)" 
					 mode="aspectFill"
					 ></image>
				</view>
				<view class="list-code">
					微信号： {{item.contact}} <text @click.stop="oncopy(item.contact)">复制</text>
				</view>
				<view class="list-bottom">
					初审
					<view @click="show=true">拒绝</view>
					<view>通过</view>
				</view>
			</view>
			</dcp-scroller>
		</view>
		<u-popup v-model="show" close-icon-pos="top-left" mode="center" border-radius="14" >
			<view class="pop-view">
				<view class="pop-title">
					拒绝理由
				</view>
				<view class="pop-text">
					<textarea value="" placeholder="请输入拒绝理由" v-model="content"/>
				</view>
				<view class="pop-btn" @click="show=false">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				//是否是下拉刷新
				isPullDown: false,
				list:[
					{
						sex:2,
						content:'盒子呀盒子',
						images:['../../static/tupian.png','../../static/tupian.png','../../static/tupian.png'],
						contact:'123456789',
						status:2,
						remark:''
					},
					{
						sex:2,
						content:'盒子呀盒子',
						images:['../../static/tupian.png','../../static/tupian.png','../../static/tupian.png'],
						contact:'123456789',
						status:2,
						remark:''
					}
				],
				show:false,
				content:'',
				isLoading: false,
			};
		},
		watch: {
				
		},
		methods:{
			// 下拉刷新
			 refresh() {
				 this.isLoading = true;
				 let that = this
				 setInterval(function(){
				 	that.isLoading = false;
				 },500)
			 }, 
			// 预览图片
			pictureView(index,imags){
				let imgs = imags.map( item =>{
				//只返回图片路径
					return item
				})
				// console.log(imgs);
				//调用预览图片的方法
				uni.previewImage({
					urls:imgs,
					current:index
				})
			},
			oncopy(data){
				uni.setClipboardData({
				    data: data,
				    success: function () {
				        console.log('success');
						  uni.showToast({
						  	title: '文字已复制',
						  	icon: 'success',
						  	duration: 2000
						  })
				    },
					fail: (err) => {
						console.log(err,)
					}
				});
			},
		},
		onLoad() {
			
		},
		
		//监听页面刷到底
		onReachBottom() {
			// 触底
			
		},
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style scoped lang="less">
.box{
	padding: 0 20rpx;
	padding-bottom: 50rpx;
	box-sizing: border-box;
}
.list{
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: 24rpx;
	padding: 30rpx 0 30rpx 30rpx;
	box-sizing: border-box;
	box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.12);
}
.list-top{
	width: 100%;
	line-height: 42rpx;
	font-size: 27rpx;
}
.woman{
	color: #dd53a8;
}
.man{
	color: #6881d3;
}
.list-image{
	width: 100%;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 19rpx;
	image{
		width: 162rpx;
		height: 162rpx;
	}
}
.list-image:after {
	content: "";
	width: 162rpx;
}
.list-code{
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	margin-top: 22rpx;
	padding-bottom: 36rpx;
	border-bottom: 1rpx solid #e5e5e5;
	text{
		color: #68676c;
		margin-left: 10rpx;
	}
}
.list-bottom{
	width: 100%;
	height: 59rpx;
	line-height: 59rpx;
	padding-right: 29rpx;
	box-sizing: border-box;
	font-size: 24rpx;
	color: #5aa2ca;
	// display: flex;
	// align-items: center;
	margin-top: 29rpx;
	view{
		width: 90rpx;
		height: 59rpx;
		line-height: 59rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		margin-left: 10rpx;
		float: right;
	}
}
.list-bottom>view:nth-child(1){
	background: #f3665f;
}
.list-bottom>view:nth-child(2){
	background: #000;
}
.pop-view{
	width: 600rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}
.pop-title{
	width: 100%;
	height: 30rpx;
	line-height: 30rpx;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
}
.pop-text{
	width: 100%;
	height: 300rpx;
	margin-top: 20rpx;
	textarea{
		width: 100%;
		height: 100%;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
}
.pop-btn{
	width: 100%;
	height: 80rpx;
	border-radius: 12rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #000;
	color: #fff;
	font-size: 35rpx;
	margin-top: 30rpx;
}
</style>
